<template>
  <view style="background: linear-gradient(to bottom, #f8f8f8, #f9eff7, #f8f8f8)">
    <view class="g-bg" :style="{ height: windowHeight }">
      <view class="g-polygon g-polygon-1"></view>
      <view class="g-polygon g-polygon-2"></view>
      <view class="g-polygon g-polygon-3"></view>
    </view>
    <view style="position: absolute; top: 0; left: 0; z-index: 2; width: 100vw; height: 100vh; overflow: hidden" :style="{ height: windowHeight }">
      <view class="logo-view">
        <image src="/static/images/logo2.svg" mode="scaleToFill" style="width: 120px; height: 120px"></image>
      </view>
      <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 750rpx; max-width: 400px">
        <mxp-form ref="mxpFormRef" :model="form" :fromBorderColor="false" itemLabelWidth="80px" :rules="rules" :cusStyle="{ width: '690rpx' }">
          <mxp-form-item :borderColor="false" labelWidth="0px" label="" prop="phone" :cusStyle="{ marginBottom: `5px` }">
            <mxp-input-number
              v-model="form.phone"
              placeholder="请输入手机号"
              :cusStyle="{ borderRadius: `10px`, padding: '0px 15px' }"
              :maxlength="11"
              :returnString="true"
              :inputStyle="{ height: '48px', padding: '0px 0px' }"
              verify="add_int_or_zero"
            ></mxp-input-number>
          </mxp-form-item>
          <mxp-form-item :borderColor="false" labelWidth="0px" prop="code" label="">
            <mxp-input
              v-model="form.code"
              placeholder="请输入验证码"
              :cusStyle="{ borderRadius: `10px`, padding: '0px 15px' }"
              :inputStyle="{ height: '48px', padding: '0px 0px' }"
              type="number"
              :maxlength="smsCodeLen"
            >
              <template #suffix>
                <mxp-count-down-button ref="mxpCountDownButtonRef" :seconds="60" :cusStyle="{ height: '48px' }" @click="sendAuthCode"></mxp-count-down-button>
              </template>
            </mxp-input>
          </mxp-form-item>
          <mxp-form-item :borderColor="false" labelWidth="0px" label="" prop="password">
            <mxp-input
              v-model="form.password"
              placeholder="请输入密码"
              :password="true"
              :cusStyle="{ borderRadius: `10px`, padding: '0px 15px' }"
              :inputStyle="{ height: '48px', padding: '0px 0px' }"
              :maxlength="passwordMax"
            ></mxp-input>
          </mxp-form-item>
          <mxp-form-item :borderColor="false" labelWidth="0px" prop="affirmPassword" label="">
            <mxp-input
              v-model="form.affirmPassword"
              placeholder="请再次输入密码"
              :password="true"
              :cusStyle="{ borderRadius: `10px`, padding: '0px 15px' }"
              :inputStyle="{ height: '48px', padding: '0px 0px' }"
              :maxlength="passwordMax"
            ></mxp-input>
          </mxp-form-item>
        </mxp-form>
        <view
          style="
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            padding: 0 30rpx;
            margin-top: 40px;
            margin-bottom: 20px;
          "
        >
          <mxp-radio v-model:checked="isAgree" labelSize="14px" label="我已阅读并同意" iconSize="18px"></mxp-radio>
          <text style="font-size: 14px; line-height: 14px; color: #8e4c00" @click="openPrivacyAgreementClick">《隐私政策》</text>
        </view>
        <mxp-button
          text="注 册"
          :background="defThemeColor.buttonColor"
          font-size="18px"
          :bold="true"
          :loading="loging"
          :disabled="loging"
          :cusStyle="{ height: '48px', width: '690rpx', maxWidth: '400px' }"
          @click="onRegister"
        ></mxp-button>
      </view>
    </view>
    <mxp-toast ref="mxpToastRef" :customNav="true"></mxp-toast>
  </view>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive, ref } from 'vue';
  import { SmsType, registerAxios, sendAuthCodeByPhoneAxios } from '@/api/account';
  import { verifyTel } from '@/mxp-ui/mxp-tool/utils/verify';
  import { getPasswordRules, getPhoneRules, getSmsCodeRules } from '@/utils/page/rules';
  import MxpForm, { type $Rules } from '@/mxp-ui/mxp-form/mxp-form.vue';
  import MxpToast from '@/mxp-ui/mxp-toast/mxp-toast.vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpFormItem from '@/mxp-ui/mxp-form-item/mxp-form-item.vue';
  import MxpCountDownButton from '@/mxp-ui/mxp-count-down-button/mxp-count-down-button.vue';
  import MxpRadio from '@/mxp-ui/mxp-radio/mxp-radio.vue';
  import MxpInput from '@/mxp-ui/mxp-input/mxp-input.vue';
  import MxpInputNumber from '@/mxp-ui/mxp-input-number/mxp-input-number.vue';
  import mxpGetSysInfoStore from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';

  const sys = mxpGetSysInfoStore().getSysInfo();
  const windowHeight = computed(() => `${sys.value.windowHeight}px`);
  const mxpFormRef = ref<InstanceType<typeof MxpForm> | null>(null);
  const mxpCountDownButtonRef = ref<InstanceType<typeof MxpCountDownButton> | null>(null);
  const mxpToastRef = ref<InstanceType<typeof MxpToast> | null>(null);

  /** 是否同意协议 */
  const isAgree = ref(false);
  const loging = ref(false);

  const form = reactive({
    phone: '',
    code: '',
    password: '',
    affirmPassword: '',
  });
  onLoad((op?: { phone?: string }) => {
    if (verifyTel(op?.phone || '')) {
      form.phone = op!.phone!;
    }
  });

  const { smsCodeLen, smsCodeRules } = getSmsCodeRules();
  const { phoneRules } = getPhoneRules();
  const { passwordMax, passwordRules } = getPasswordRules();

  const rules: $Rules<typeof form> = {
    phone: phoneRules,
    code: smsCodeRules,
    password: passwordRules('密码'),
    affirmPassword: passwordRules('确认密码'),
  };

  /**
   * 发送验证码
   */
  async function sendAuthCode() {
    try {
      await mxpFormRef.value!.validateField('phone');
      mxpCountDownButtonRef.value?.setLoadState(true);
      await sendAuthCodeByPhoneAxios(SmsType.AppSMSRegister, form.phone);
      mxpCountDownButtonRef.value?.setLoadState(false);
      mxpCountDownButtonRef.value?.start(); // 开始倒计时
    } catch (err) {
      mxpCountDownButtonRef.value?.setLoadState(false);
      mxpToastRef.value?.showError(err.msg || '验证码发送失败');
    }
  }

  /**
   * 注册
   */
  async function onRegister() {
    if (isAgree.value) {
      try {
        await mxpFormRef.value?.validate();
        loging.value = true;
        await registerAxios({ phone: form.phone, smsCode: form.code, password: form.password });
        loging.value = false;
        uni.reLaunch({ url: `/pages/account/login/login?phone=${form.phone}` });
      } catch (err) {
        loging.value = false;
        mxpToastRef.value?.showError(Array.isArray(err) && err[0] && err[0].message ? err[0].message : err.msg || '注册失败,-BD0002');
      }
    } else {
      mxpToastRef.value?.showWarning('请阅读并同意《隐私政策》');
    }
  }

  /** 打开隐私政策 */
  function openPrivacyAgreementClick() {
    uni.navigateTo({
      url: '/pages/account/privacy-agreement/privacy-agreement',
    });
  }
</script>

<style scoped lang="scss">
  .logo-view {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .privacy-agreement-view {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 15px;
    margin: 20px 0;
  }

  .g-bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .g-polygon {
      position: absolute;
      opacity: 0.5;
    }

    &:before {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: '';
      backdrop-filter: blur(40px);
    }

    .g-polygon-1 {
      top: 150px;
      left: -10%;
      width: 500rpx;
      height: 400rpx;
      clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
      background: linear-gradient(#f2f2c8, #e3eeaf);
      animation: rotate-animation 8s infinite linear;
    }

    .g-polygon-2 {
      top: 150px;
      left: 38%;
      width: 600rpx;
      height: 400rpx;
      clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
      background: linear-gradient(-36deg, #eebab1, #f7cab7);
      animation: rotate-animation 8s infinite linear;
    }

    .g-polygon-3 {
      top: 150px;
      left: 20%;
      width: 500rpx;
      height: 300rpx;
      clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
      background: linear-gradient(0deg, #f5e2b9, #f2dbbb);
      animation: rotate-animation 9s infinite linear;
    }
  }

  @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
